<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">资产</span>
    <mat-button-toggle-group [value]="filterEx"
                             (change)="exGroupChanged($event)">
      <mat-button-toggle value="all">全部</mat-button-toggle>
      <mat-button-toggle [value]="ex.code" *ngFor="let ex of $exchs | async">
        {{ex.name}}
      </mat-button-toggle>
    </mat-button-toggle-group>

    <span class="spacer"></span>

    <mat-checkbox [(ngModel)]="skipSmallAsset" (change)="filterSmall()">仅 &gt; 1美元</mat-checkbox>
    &nbsp;&nbsp;
    <button mat-button (click)="refresh()" [disabled]="processes.refreshing">
      <mat-icon>refresh</mat-icon>
      刷新
    </button>
    <button mat-button (click)="showStructure()" [disabled]="processes.refreshing">
      <mat-icon>donut_large</mat-icon>
      结构
    </button>

    <button mat-button [matMenuTriggerFor]="syncActions">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #syncActions="matMenu">
      <button mat-menu-item (click)="syncAssets()" [disabled]="processes.syncAssets">
        <mat-icon>sync</mat-icon>
        同步
      </button>
      <button mat-menu-item (click)="syncAssetsFor(exch.code)" [disabled]="processes['syncAssets-'+exch.code]"
              *ngFor="let exch of $exchs | async">
        <mat-icon>sync</mat-icon>
        同步（{{exch.name}}）
      </button>
      <button mat-menu-item (click)="sellAll()">
        <mat-icon>done_all</mat-icon>
        全部卖出（ &gt; $10）
      </button>
    </mat-menu>
  </mat-toolbar>

  <table mat-table class="full-width" matSort matSortActive="holdingValue" matSortDirection="desc">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1}}
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易所</th>
      <td mat-cell *matCellDef="let row">{{row.ex}}</td>
    </ng-container>

    <ng-container matColumnDef="ccy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>币种</th>
      <td mat-cell *matCellDef="let row">
        <span class="ccy-logo-code clickable" (click)="showCcyInfo(row)">
          <img class="ccy-logo" [src]="CoinLogoPath(row.ccy)" alt="">
          <span class="ccy-code">{{row.ccy}}</span>
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="holding">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>持有量</th>
      <td mat-cell *matCellDef="let row">{{row.holding | money}}</td>
    </ng-container>

    <ng-container matColumnDef="frozen">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>（其中）冻结</th>
      <td mat-cell *matCellDef="let row">{{row.frozen | money}}</td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>现价（美元）</th>
      <td mat-cell *matCellDef="let row">{{row.price | money}}</td>
    </ng-container>

    <ng-container matColumnDef="holdingValue">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>折美元</th>
      <td mat-cell *matCellDef="let row">{{row.holdingValue | moneysum}}</td>
    </ng-container>

    <ng-container matColumnDef="frozenValue">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>冻结（折美元）</th>
      <td mat-cell *matCellDef="let row">{{row.frozenValue | moneysum}}</td>
    </ng-container>

    <ng-container matColumnDef="createdAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>初次同步</th>
      <td mat-cell *matCellDef="let row">{{row.createdAt | date:'y-MM-dd'}}</td>
    </ng-container>

    <ng-container matColumnDef="lastSync">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>上次同步</th>
      <td mat-cell *matCellDef="let row">{{row.lastSync | date:'MM-dd HH:mm'}}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">

        <button mat-button (click)="showOrders(row)">
          <mat-icon>list</mat-icon>
          订单
        </button>
        <button mat-button (click)="loadPairs(row)" *ngIf="!row.pairsResult">
          交易对
          <mat-icon>more_horiz</mat-icon>
        </button>
        <ng-template [ngIf]="row.pairsResult">
          <ng-template [ngIf]="row.pairsResult.asBase&&row.pairsResult.asBase.length>0">
            <button mat-button [matMenuTriggerFor]="tradeAsBase">
              作为基础
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #tradeAsBase="matMenu">
              <button mat-menu-item *ngFor="let pair of row.pairsResult.asBase" (click)="openOrderForm(pair)">
                <img class="ccy-logo" [src]="CoinLogoPath(pair.baseCcy)" alt="">
                {{pair.baseCcy}}
                &nbsp;-&nbsp;
                <img class="ccy-logo" [src]="CoinLogoPath(pair.quoteCcy)" alt="">
                {{pair.quoteCcy}}
              </button>
            </mat-menu>
          </ng-template>
          <ng-template [ngIf]="row.pairsResult.asQuote&&row.pairsResult.asQuote.length>0">
            <button mat-button [matMenuTriggerFor]="tradeAsQuote">
              作为报价
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #tradeAsQuote="matMenu">
              <button mat-menu-item *ngFor="let pair of row.pairsResult.asQuote" (click)="openOrderForm(pair,'buy')">
                <img class="ccy-logo" [src]="CoinLogoPath(pair.baseCcy)" alt="">
                {{pair.baseCcy}}
                &nbsp;-&nbsp;
                <img class="ccy-logo" [src]="CoinLogoPath(pair.quoteCcy)" alt="">
                {{pair.quoteCcy}}
              </button>
            </mat-menu>
          </ng-template>
        </ng-template>

      </td>
    </ng-container>

    <ng-container matColumnDef="footer">
      <th mat-header-cell *matFooterCellDef colspan="8" class="sum-row">
        共持有（折美元）：<span class="sum-amount">{{holdingValueSum | moneysum}}</span> &nbsp;&nbsp;
        （其中）冻结（折美元）：<span class="sum-amount">{{frozenValueSum | moneysum}}</span>
      </th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="['footer']"></tr>
  </table>

</div>

<p>&nbsp;</p>
